/*
 * @Author       : 魏威 <1209562577@qq.com>
 * @Date         : 2022-06-09 10:10 周4
 * @Description  : 颜色图例demo示例
 */

import React, { useEffect, useRef } from 'react'
import * as echarts from 'echarts'
import './index.less'

const namespace = 'cl-demo01'

const option = {
  tooltip: {},
  legend: {
    // data: ['价格1', '价格2', '价格3']
  },
  xAxis: {
    data: ['衬衫111111', '羊毛衫', '雪纺衫', '裤子', '高跟鞋', '袜子'],
    axisLabel: {
      interval: 0,
      hideOverlap: true
    }
  },
  yAxis: {},
  series: [
    {
      name: '价格1',
      type: 'bar',
      data: [5, 20, 36, 10, 10, 20]
    },
    {
      name: '价格2',
      type: 'bar',
      data: [15, 30, 26, 18, 30, 10]
    },
    {
      name: '价格3',
      type: 'bar',
      data: [29, 20, 16, 28, 20, 15]
    }
  ]
}

export default function ClDemo01() {
  const echartRef: any = useRef(null)

  useEffect(() => {
    const chart01 = echarts.init(echartRef.current)
    chart01.setOption(option)
    return () => {
      chart01.dispose()
    }
  }, [])

  return (
    <div className={namespace}>
      <div ref={echartRef} className={'demo-box'}>
        123
      </div>
    </div>
  )
}
